<template>
  <div>
    <canvas ref="canvas" width="400" height="400"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 假设每个网格的大小
      gridSize: 10,
      // 要填充颜色的区域（经纬度范围示例）
      targetLatRange: [30, 40],
      targetLngRange: [110, 120],
    };
  },
  mounted() {
    this.drawGrid();
  },
  methods: {
    drawGrid() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      // 清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // 绘制网格
      for (let y = 0; y < canvas.height; y += this.gridSize) {
        for (let x = 0; x < canvas.width; x += this.gridSize) {
          // 这里简单模拟经纬度到画布坐标的转换
          const lat = (y / canvas.height) * 180 - 90;
          const lng = (x / canvas.width) * 360 - 180;
          if (
            lat >= this.targetLatRange[0] &&
            lat <= this.targetLatRange[1] &&
            lng >= this.targetLngRange[0] &&
            lng <= this.targetLngRange[1]
          ) {
            ctx.fillStyle = "blue";
          } else {
            ctx.fillStyle = "gray";
          }
          ctx.fillRect(x, y, this.gridSize, this.gridSize);
          ctx.strokeStyle = "black";
          ctx.strokeRect(x, y, this.gridSize, this.gridSize);
        }
      }
    },
  },
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 800px;
}
</style>
